'use strict';
// 用了 element测试。手机上不能显示图片
import {httpSeaFile} from "../js/http/httpSeaFile.js";
import {url_getPhoto} from "../js/http/httpConfig.js";

export let mainPage = {

    template: `
        <div>
            <div class="musicPlayer">
                <div class="titleArea signLine">{{test}}</div>
                <div class="mainArea signLine">
<!--                    <div class="mainPhoto signLine">-->
                    <el-card class="mainPhoto signLine">
                       <div v-for="value in photoList" class="photoCss signLineRoya">
<!--                            <div v-if="value.IsDir" @click="getPhoto(value.Id)">{{value.FileName}}</div>-->
                            <el-card v-if="value.IsDir"  shadow="hover" style="height: 98%;width: 98%"><div @click="getPhoto(value.Id)" style="width: 100%;height: 100%">{{value.FileName}}</div>
                            </el-card>
<!--                            <div v-if="!value.IsDir"  v-bind:style="{ backgroundImage:'url('+value.FileUrl+')' }">图片</div>-->
                            <el-card v-if="!value.IsDir" shadow="hover" style="height: 98%;width: 98%">
                            <el-image :src="value.FileUrl" fit="contain" :preview-src-list="calPhoto(value.FileUrl)">>
                              <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                              </div>
                            </el-image>
                            
                            </el-card>
                       </div>
                    </el-card>
                       
                        <!--                <div class="photoCss signLineRoya"></div>-->
                        <!--                <div class="photoCss signLineRoya"></div>-->
                        <!--                <div class="photoCss signLineRoya"></div>-->
                        <!--                <div class="photoCss signLineRoya"></div>-->
<!--                    </div>-->
                    <div class="mainInfo signLine"></div>
                </div>
            </div>
            
            <div class="bottomArea signLine"></div>

        </div>
    `,
    data: function () {
        return {
            test:"测试页",
            photoList:[],
            photoUrlList:[],
        }
    },
    props: {},
    computed:{

    },
    methods: {
        calPhoto(value){
            let calNum=0;
            let photoList=[];
            for (let i =0 ;i<this.photoUrlList.length;i++){
                if (value===this.photoUrlList[i]){
                    calNum=i;
                    break
                }
            }
            for (let i=calNum;i<this.photoUrlList.length;i++){
                photoList.push(this.photoUrlList[i])
            }
            for (let i=0;i<calNum;i++){
                photoList.push(this.photoUrlList[i])
            }
            return photoList
        },
        getPhoto(Num){
            let postData ={
                dirID:Num.toString()
            };
            let _this=this
            httpSeaFile.post(url_getPhoto,postData,function (data) {
                _this.photoList=data;
                let phtoList=[]
                for (let value of data){
                    if (!value.IsDir){
                        phtoList.push(value.FileUrl)
                    }
                }
                _this.photoUrlList=phtoList
                console.log("data",data)
            },function (errCode) {
                console.log("errCode",errCode)
            },function (netWorkErr) {
                console.log("netWorkErr",netWorkErr)
            })
        },
    },
    components: {},
    mounted: function () {
     console.log("测试文件");
        let postData ={
         dirID:"1"
        };
        let _this=this
        httpSeaFile.post(url_getPhoto,postData,function (data) {
            _this.photoList=data;


            console.log("data",data)
        },function (errCode) {
            console.log("errCode",errCode)
        },function (netWorkErr) {
            console.log("netWorkErr",netWorkErr)
        })
    }


}